<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录首页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 20px;
            text-align: center;
        }

        h1 {
            color: #333;
        }

        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }

        th, td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f4f4f4;
        }

        tr:hover {
            background-color: #f9f9f9;
        }
    </style>
</head>

<body>
<h1>用户信息表</h1>
<table id="user-table">
    <thead>
    <tr>
        <th>用户名</th>
        <th>专业</th>
        <th>年级</th>
        <th>班级</th>
        <th>联系方式</th>
    </tr>
    </thead>
    <tbody>
    <!-- 用户信息将在这里动态生成 -->
    </tbody>
</table>

</body>
<script type="text/javascript">
    //假设的用户信息数组
    const userData = [
        { username: '刘文杰', major: '软件工程', grade: '2023', class: '1班', contact: '1234567890' }
    ];

    // 获取表格的tbody元素
    const tableBody = document.querySelector('#user-table tbody');

    // 遍历用户数据并创建表格行
    userData.forEach(user => {
        const row = document.createElement('tr');
        const cells = [
            document.createElement('td'),
            document.createElement('td'),
            document.createElement('td'),
            document.createElement('td'),
            document.createElement('td')
        ];

        cells.forEach((cell, index) => {
            cell.textContent = user[Object.keys(user)[index]];
            row.appendChild(cell);
        });

        tableBody.appendChild(row);
    });
</script>
</html>